<!DOCTYPE html>
<html>

<head>
    <title>liubin website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="description" content="spacetree组织架构图 说明jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 定制化内容的效果图 插件说明很好的canvas的组织架构图，从上到下按层级展示汇报关系, 支持定制化内容，和异步加载子节点(下面会讲到)。 相关api请参考 官网或是example1.js 数据格式12345678910111213141516var data = &amp;#123;">
    <meta property="og:type" content="article">
    <meta property="og:title" content="liubin website">
    <meta property="og:url" content="http://yoursite.com/2018/03/13/spacetree/index.html">
    <meta property="og:site_name" content="liubin website">
    <meta property="og:description" content="spacetree组织架构图 说明jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 定制化内容的效果图 插件说明很好的canvas的组织架构图，从上到下按层级展示汇报关系, 支持定制化内容，和异步加载子节点(下面会讲到)。 相关api请参考 官网或是example1.js 数据格式12345678910111213141516var data = &amp;#123;">
    <meta property="og:image" content="https://github.com/liubin915249126/javascript/blob/master/spacetree/image/spacetree1.gif">
    <meta property="og:image" content="https://github.com/liubin915249126/javascript/blob/master/spacetree/image/spacetree.gif">
    <meta property="og:updated_time" content="2018-03-13T10:08:42.000Z">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="liubin website">
    <meta name="twitter:description" content="spacetree组织架构图 说明jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 定制化内容的效果图 插件说明很好的canvas的组织架构图，从上到下按层级展示汇报关系, 支持定制化内容，和异步加载子节点(下面会讲到)。 相关api请参考 官网或是example1.js 数据格式12345678910111213141516var data = &amp;#123;">
    <meta name="twitter:image" content="https://github.com/liubin915249126/javascript/blob/master/spacetree/image/spacetree1.gif">

    <link rel="alternate" href="/atom.xml" title="liubin website" type="application/atom+xml">
    <link rel="stylesheet" href="./style.css">

</head>

<body>
    <div id="container">
        <div id="wrap">
            <header class="header">
                <a href="../index.html" target="_blank">
                    <img src="../img/liubin.jpg" class="lb_logo">
                    <span>刘宾</span>
                </a>

                <span>
                    <a class="logo_a" href="../index.html" target="_blank">返回首页</a>
                </span>
            </header>
            <div class="outer">
                <section id="main">
                    <article id="post-spacetree" class="article article-type-post" itemscope itemprop="blogPost">
                        <div class="article-meta">
                            <a href="/2018/03/13/spacetree/" class="article-date">
                                <time datetime="2018-03-13T10:08:30.323Z" itemprop="datePublished">2018-03-13</time>
                            </a>

                        </div>
                        <div class="article-inner">


                            <div class="article-entry" itemprop="articleBody">

                                <h2 id="spacetree组织架构图">
                                    <a href="#spacetree组织架构图" class="headerlink" title="spacetree组织架构图"></a>spacetree组织架构图</h2>
                                <!-- 说明 -->
                                <h3 id="说明">
                                    <a href="#说明" class="headerlink" title="说明"></a>说明</h3>
                                <p>jquery插件皆可用于react,使用方法:
                                    <a href="https://github.com/liubin915249126/react-study/blob/master/jquery-in-react.md" target="_blank" rel="noopener">react中使用jquery插件</a>
                                </p>
                                <h4 id="效果图">
                                    <a href="#效果图" class="headerlink" title="效果图"></a>效果图</h4>
                                <p>
                                    <img src="https://github.com/liubin915249126/javascript/raw/master/spacetree/image/spacetree1.gif" alt="效果图">
                                </p>
                                <h4 id="定制化内容的效果图">
                                    <a href="#定制化内容的效果图" class="headerlink" title="定制化内容的效果图"></a>定制化内容的效果图</h4>
                                <p>
                                    <img src="https://github.com/liubin915249126/javascript/raw/master/spacetree/image/spacetree.gif" alt="效果图">
                                </p>
                                <h4 id="插件说明">
                                    <a href="#插件说明" class="headerlink" title="插件说明"></a>插件说明</h4>
                                <pre><code>很好的canvas的组织架构图，从上到下按层级展示汇报关系,
            支持定制化内容，和异步加载子节点(下面会讲到)。
            相关api请参考
            </code></pre>
                                <p>
                                    <a href="http://philogb.github.io/jit/static/v20/Docs/files/Core/Core-js.html" target="_blank" rel="noopener">官网</a>
                                    <br>或是
                                    <a href="https://github.com/liubin915249126/javascript/blob/master/spacetree/js/example1.js" target="_blank" rel="noopener">example1.js</a>
                                </p>
                                <h4 id="数据格式">
                                    <a href="#数据格式" class="headerlink" title="数据格式"></a>数据格式</h4>
                                <figure class="highlight js">
                                    <table>
                                        <tr>
                                            <td class="gutter">
                                                <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre>
                                            </td>
                                            <td class="code">
                                                <pre><span class="line"><span class="keyword">var</span> data = &#123;</span><br><span class="line">    id:<span class="number">01</span>,      <span class="comment">//每个节点有一个唯一的标示</span></span><br><span class="line">    data:&#123;&#125;,    <span class="comment">//存放每个节点数据</span></span><br><span class="line">    children:[  <span class="comment">//存放元素子节点</span></span><br><span class="line">       &#123;</span><br><span class="line">       id:<span class="number">011</span>,</span><br><span class="line">       data:&#123;&#125;,</span><br><span class="line">       children:[]</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">       id:<span class="number">012</span>,</span><br><span class="line">       data:&#123;&#125;,</span><br><span class="line">       children:[]</span><br><span class="line">    &#125;</span><br><span class="line">    ]</span><br><span class="line">&#125;</span><br></pre>
                                            </td>
                                        </tr>
                                    </table>
                                </figure>
                                <h4 id="开发中的痛点问题">
                                    <a href="#开发中的痛点问题" class="headerlink" title="开发中的痛点问题"></a>开发中的痛点问题</h4>
                                <pre><code>插件默认加载全部数据，当后台数据量太大，一次返回时，
            会造成页面卡死，用户体验相当不好。且在开发中，用户希
            望能够根据数据定制每一块的内容展示。
            </code></pre>
                                <h4 id="解决办法1">
                                    <a href="#解决办法1" class="headerlink" title="解决办法1"></a>解决办法1</h4>
                                <pre><code>对于第一个问题：每次只返回两层的数据,(注意，所有的数据必须要有一个不重复的id)
            剩下的数据可以通过异步加载的方式给架构图添加子节点
            在官网上找到一个办法,当通过ajax请求回来的数据后通过：     
            </code></pre>
                                <figure class="highlight js">
                                    <table>
                                        <tr>
                                            <td class="gutter">
                                                <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre>
                                            </td>
                                            <td class="code">
                                                <pre><span class="line">st.addSubtree(data, type, &#123;   <span class="comment">//st指的是创建的树对象，可以将其设为全局变量，</span></span><br><span class="line">                                以便外面拿到</span><br><span class="line">                              <span class="comment">//data即ajax获取的值</span></span><br><span class="line">                              <span class="comment">//type:"animate":"replot"</span></span><br><span class="line">    hideLabels: <span class="literal">false</span>,</span><br><span class="line">    onComplete: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;   <span class="comment">//加载完成后的回调</span></span><br><span class="line">        Log.write(<span class="string">"subtree added"</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre>
                                            </td>
                                        </tr>
                                    </table>
                                </figure>
                                <pre><code>同时还有另外一个api,用于删除子节点
            </code></pre>
                                <figure class="highlight js">
                                    <table>
                                        <tr>
                                            <td class="gutter">
                                                <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre>
                                            </td>
                                            <td class="code">
                                                <pre><span class="line">st.removeSubtree(id, <span class="literal">true</span>, <span class="string">'animate'</span>, &#123;   <span class="comment">//id:想要删除子节点的节点的id标识</span></span><br><span class="line">                       hideLabels: <span class="literal">false</span>, <span class="comment">//动画执行过程中是否隐藏节点</span></span><br><span class="line">                       onComplete: <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">                         removing = <span class="literal">false</span>;</span><br><span class="line">                         Log.write(<span class="string">"subtree removed"</span>);</span><br><span class="line">                       &#125;</span><br><span class="line">                   &#125;);</span><br></pre>
                                            </td>
                                        </tr>
                                    </table>
                                </figure>
                                <h4 id="解决办法2">
                                    <a href="#解决办法2" class="headerlink" title="解决办法2"></a>解决办法2</h4>
                                <pre><code>对于第二个问题：同样有一个api用lai定制化每个节点的内容
            onCreateLabel:里面有两个参数label,node:label指的是容器
            div,node指的是每块对应的数据，这里用jquery的方式根据数据
            动态生成内容。
            </code></pre>
                                <figure class="highlight js">
                                    <table>
                                        <tr>
                                            <td class="gutter">
                                                <pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre>
                                            </td>
                                            <td class="code">
                                                <pre><span class="line">onCreateLabel: <span class="function"><span class="keyword">function</span> (<span class="params">label, node</span>) </span>&#123; <span class="comment">//</span></span><br><span class="line">       label.id = node.id;</span><br><span class="line">       <span class="keyword">var</span> level = [<span class="string">'第一层'</span>,<span class="string">'第二层'</span>,<span class="string">'第三层'</span>,<span class="string">'第四层'</span>,<span class="string">'第五层'</span>,<span class="string">'第六层'</span>];</span><br><span class="line">       <span class="keyword">var</span> wrap = <span class="string">'&lt;div class="wrap"&gt;'</span>+</span><br><span class="line">                     <span class="string">'&lt;div class="level"&gt;&lt;/div&gt;'</span>+</span><br><span class="line">                     <span class="string">'&lt;div class="secondLevel"&gt;&lt;/div&gt;'</span>+</span><br><span class="line">                     <span class="string">'&lt;div class="level"&gt;&lt;/div&gt;'</span>+ </span><br><span class="line">                   <span class="string">'&lt;/div&gt;'</span></span><br><span class="line">       <span class="keyword">var</span> $wrap = $(wrap);</span><br><span class="line">       $wrap.find(<span class="string">'.secondLevel'</span>).text(node.name);</span><br><span class="line">       $wrap.find(<span class="string">'.level'</span>).text(level[node._depth])            </span><br><span class="line">       $(label).append($wrap);</span><br><span class="line">   &#125;</span><br></pre>
                                            </td>
                                        </tr>
                                    </table>
                                </figure>

                            </div>
                            <footer class="article-footer">
                                <a data-url="http://yoursite.com/2018/03/13/spacetree/" data-id="cjephvb9k0003ycx8cfnsv6gt" class="article-share-link">Teilen</a>


                            </footer>
                        </div>


                        <nav id="article-nav">


                            <a href="/2018/03/13/jquery-in-react/" id="article-nav-older" class="article-nav-link-wrap">
                                <strong class="article-nav-caption">Älter</strong>
                                <div class="article-nav-title"></div>
                            </a>

                        </nav>


                    </article>

                </section>
            </div>
            <!-- Global site tag (gtag.js) - Google Analytics -->
            <script async src="https://www.googletagmanager.com/gtag/js?id=UA-115451143-1"></script>
            <script>
                window.dataLayer = window.dataLayer || [];

                function gtag() {
                    dataLayer.push(arguments);
                }
                gtag('js', new Date());

                gtag('config', 'UA-115451143-1');
            </script>
</body>

</html>